@import "src/styles/_var.scss";
@import "src/styles/_mixin.scss";

.app-table {
  background-color: $white;

  .app-table-topbar {
    padding: 10px;
    background-color: $colorHover;

    @include clearfix;

    .app-table-topbar__content--right {
      float: right;
    }
  }

  .app-table-pagination {
    padding: 10px;
    text-align: center;
  }

  &.app-table--border {

    .app-table-topbar,
    .app-table-pagination {
      border: 1px solid $border-color-base;
    }

    .app-table-topbar {
      border-bottom-width: 0;
    }

    .app-table-pagination {
      border-top-width: 0;
    }
  }
}

.app-table-toolbar {

  .el-dropdown {
    margin-left: 6px;
  }

  .el-dropdown-link {
    color: $blue;
    cursor: pointer;
    user-select: none;

    &:hover, &:focus {
      color: mix($white, $blue, 20%);
    }

    &:active {
      color: mix($black, $blue, 10%);
    }

    &.el-dropdown-link--small,
    &.el-dropdown-link--mini {
      font-size: 12px;
    }

    &.el-dropdown-link--medium {
      font-size: 14px;
    }
  }

  .el-icon-arrow-down {
    font-size: 12px;
  }
}
